<script setup lang="ts">
import { onMounted, ref } from "vue"
import OperationTable from "./components/table.vue"
import {
  reqGetOperationList,
  reqGetOptionsList,
} from "@/api/Operation/Operation"
import type {
  OperResultResponse,
  OperTableItems,
  OperTableResponse,
} from "@/api/types/Operation"

// 操作类型
const optionTypes = ref<string[]>([])
// 操作人
const optionPersons = ref<string[]>([])
// 当前页
const current = ref(1)
// 列表长度
const limit = ref(5)
// 总长度
const total = ref(0)
// 操作类型
const operationType = ref("")
// 操作人
const operationPerson = ref("")

// 列表数据
const tableList = ref<OperTableItems[]>([])
// 获取下拉列表数据
const getSelectList = async () => {
  const result: OperResultResponse = await reqGetOptionsList()
  optionTypes.value = result.data.content
  optionPersons.value = result.data.person
}

// 获取操作列表
const getOperationList = async (pages = 1) => {
  current.value = pages
  // 请求参数
  const listParams = {
    current: current.value,
    limit: limit.value,
    person: operationPerson.value,
    content: operationType.value,
  }
  const result: OperTableResponse = await reqGetOperationList(listParams)
  tableList.value = result.data.result
  current.value = +result.data.current
  limit.value = +result.data.limit
  total.value = +result.data.total
}
// 获取长度列表
const handleSizeChange = () => {
  getOperationList(current.value)
}
// 改变类型搜索
const changeTypes = async (e: string) => {
  if (operationType.value) {
    operationType.value = e
    console.log(e);

  } else {
    operationType.value = ""
  }
  await getOperationList()
  ElMessage.success('操作成功')
}
// 改变人搜索
const changePerson = async (e: string) => {
  if (operationPerson.value) {
    operationPerson.value = e 
    console.log(e);
    
  } else {
    operationPerson.value = ""
  }
  await getOperationList()
  ElMessage.success('操作成功')
}
onMounted(() => {
  getSelectList()
  getOperationList()
})
</script>

<template>
  <div class="Operation">
    <el-card>
      <el-form>
        <el-row>
          <el-col v-has="`Operation.btn.type`" :span="7"  v-model="operationPerson">
            <el-form-item label="操作类型">
              <el-select
                v-model="operationType"
                @change="changeTypes"
                placeholder="请选择操作类型"
                clearable
              >
                <el-option
                  v-for="(item, index) in optionTypes"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-has="`Operation.btn.person`">
            <el-form-item label="操作人">
              <el-select
                @change="changePerson"
                placeholder="请选择操作人"
                v-model="operationPerson"
                clearable
              >
                <el-option
                  v-for="(item, index) in optionPersons"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <OperationTable :tableList="tableList" />
      <el-pagination
        v-model:current-page="current"
        v-model:page-size="limit"
        :page-sizes="[5, 10, 15, 20]"
        :background="true"
        layout="prev, pager, next, jumper,->,total, sizes,"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="getOperationList"
      />
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.Operation {
  .el-card {
    margin-bottom: 20px;
    .el-pagination {
      margin-top: 20px;
    }
  }
  .el-form-item {
    margin: 0px 20px;
  }
  .el-input {
    width: 140px;
  }
}
</style>
